<template>
	<el-card shadow="hover" header="欢迎">
		<el-row type="flex" class="user-infor">
			<el-col :span="5">
				<el-row style="margin-top: 10px" type="flex" align="middle">
					<el-image class="avator-img" src="img/avatar.png" />
				</el-row>
			</el-col>
			<el-col :span="19" style="padding-left:20px;">
				<el-row style="margin-top: 15px" type="flex" align="middle">
					<div>
						<b class="card-user-infor-name">{{ userName }}</b>
						<p style="font-size: 2em">欢迎您使用 寻衡CLOUD管理后台</p>
					</div>
				</el-row>
			</el-col>
		</el-row>
	</el-card>
</template>

<script>
	export default {
		data() {
			return {
				userName:"",
				userNameF:""
			}
		},
		methods: {
		},
		created() {
			var userInfo = this.$TOOL.data.get("USER_INFO");
			this.userName = userInfo.username;
			this.userNameF = this.userName.substring(0, 1);
		}
	}
</script>

<style scoped>
.user-infor {
	height: 135px;
}

.avator-img {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	margin: 0px auto 10px;
}

.card-user-infor-name {
	font-size: 3em;
	color: var(--el-color-primary);
}

.made-child-con-middle {
}




.card-title {
	color: #abafbd;
}



.to-do-list-con {
	height: 238px;
	overflow: auto;
}

.to-do-item {
	padding: 2px;
}

.infor-card-con {
	height: 100px;
}

.infor-card-icon-con {
	height: 100%;
	color: white;
	border-radius: 3px 0 0 3px;
}

</style>
